<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>出库管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/resource/css/common.css" />
		<link rel="stylesheet" href="/resource/css/layui.css" media="all">
		<link rel="stylesheet" href="/resource/css/system.css" />
	</head>
	<body id="out">
		<div class="formHead">
			<div class="layui-form inhead">
				<div class="layui-inline">
					<div class="layui-btn" id="add">出库</div>
				</div>
				<div class="layui-inline">
					<div class="layui-btn">导入出库单</div>
					<span>注 ：该列表始终显示库存量，已卖出的设备不显示</span>
				</div>
			</div>

			<form class="layui-form">
				<div class="layui-inline">
					<label class="layui-form-label">销售渠道</label>
					<div class="layui-inline">
						<!--<select name="saleChannel" id="saleChannel">
						</select>-->
						<input type="text" name="saleChannel" id="saleChannel" class="layui-input"/>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">联系电话</label>
					<div class="layui-input-inline">
						<input type="text" name="phone" id="phone" class="layui-input"/>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">出库时间从</label>
					<div class="layui-input-inline">
						<input type="text" name="startTime" readonly id="startTime" class="layui-input"/>
					</div>
					到
					<div class="layui-input-inline">
						<input type="text" name="endTime" readonly id="endTime" class="layui-input"/>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">IMEI号码</label>
					<div class="layui-input-inline">
						<input type="text" name="imei" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="query">查询</button>
				</div>
			</form>
		</div>
	<table class="layui-hide layui-table" id="dataTable" lay-filter="dataTable"></table>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-normal" lay-event="detail">详情</a>
			<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
		</script>
	 <!--<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>-->
		<script src="/resource/layui.js" charset="utf-8"></script>
		<script>
            var token=(new parent.window._user()).getData('token');
            var where={
                "_token":token,
                "companyCode":(new parent.window._user()).getData('venderCode'), //厂商编号
                "productCode":(new parent.window._user()).getData('productCode'),  //产品名称编号
                "modelNumber":(new parent.window._user()).getData('versionCode')  //产品型号
            }
            layui.use(['table','laydate','form','laypage','layer'], function() {
                var table = layui.table//表格
                    ,laydate = layui.laydate //日期
                    ,laypage = layui.laypage //分页
                    ,form = layui.form//表单
                    ,layerTips = parent.layer === undefined ? layui.layer : parent.layer
                    ,$ = layui.jquery
                    ,layer = layui.layer; //独立版的layer无需执行这一句

                //日期时间选择器
                laydate.render({
                    elem: '#startTime'
                    ,type: 'datetime'
                });
                laydate.render({
                    elem: '#endTime'
                    ,type: 'datetime'
                });
                var htmlStr='';
                //初始化城市查询下拉列表
                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    async: false, // 使用同步方式
                    data: {"_token":token},
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/province/selectProvince" ,//url
                    success: function (result) {
                        var data=result.data;
                        if (result.status == 1) {
                            $.each(data,function(index,value){
                                htmlStr+= '<option value="' + value.prvId + '">' + value.prvSname + '</option>';
                            })

                        }else{
                            layer.msg(result.msg);
                        }
                    },
                    error : function() {
                        layer.msg("网络异常!");
                    }
                });

                form.on('submit(query)', function(data){
                    where={
                        "_token":token,
                        "companyCode":(new parent.window._user()).getData('venderCode'), //厂商编号
                        "productCode":(new parent.window._user()).getData('productCode'),  //产品名称编号
                        "modelNumber":(new parent.window._user()).getData('versionCode')  //产品型号
                    }
                    $.extend( where, data.field );
                    table.reload('dataTable', {
                        where: where
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }});
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

                //出库表格
				table.render({
					elem: '#dataTable'
					,url: '/store/queryout'
					,page: true // 是否开启分页
                    ,limit : 10
					,method: 'get'					// 请求类型 默认get
                    ,where: where
                    ,cols: [
                        [{
                            field: 'imei',
                            width: 180,
                            title: 'IMEI号码'
                        }, {
                            field: 'product',
                            width: 180,
                            title: '产品名称'
                        }, {
                            field: 'version',
                            width: 120,
                            title: '规格、型号',

                        }, {
                            field: 'vender',
                            width: 80,
                            title: '厂家',
                            sort: true
                        }, {
                            field: 'outTime',
                            width: 180,
                            title: '销售时间'
                        }, {
                            field: 'inUnitPrice',
                            width: 80,
                            title: '进货价',
                            sort: true
                        }, {
                            field: 'outUnitPrice',
                            width: 80,
                            title: '销售价',
                            sort: true
                        }, {
                            width: 80,
                            title: '利润',
                            templet:function(d){
								return d.outUnitPrice-d.inUnitPrice
							}
                        }, {
                            field: 'consignee',
                            width: 80,
                            title: '收货人'
                        }, {
                            field: 'address',
                            width: 80,
                            title: '收货地址'
                        },{
                            field: 'phone',
                            width: 80,
                            title: '联系电话'
                        },{
                            field: 'outPerson',
                            width: 80,
                            title: '销售人'
                        },{
                            field: 'saleChannel',
                            width: 80,
                            title: '销售渠道'
                        },{
                            field: 'remark',
                            width: 80,
                            title: '备注'
                        }, {
                            field: "right",
                            width: 278,
                            title: '操作',
                            align: 'center',
                            toolbar: '#barDemo'
                        }]
                    ]

				});
                //监听工具条
                table.on('tool(dataTable)', function(obj) {
                    var data = obj.data;
                    if(obj.event === 'detail') {
                        showform(obj,"show");
                    } else if(obj.event === 'del') {
                        layer.confirm('真的删除行么', function(index) {
                            $.ajax({
                                //几个参数需要注意一下
                                type: "POST",//方法类型
                                async: false, // 使用同步方式
                                data:  {"_token":token,"id":obj.data.id},
                                dataType: "json",//预期服务器返回的数据类型
                                url: "/store/outdelete" ,//url
                                success: function (result) {
                                    var data=result.data;
                                    if (result.status == 1) {
                                        obj.del();
                                        layer.close(index);
                                    }else{
                                        layer.msg(result.msg);
                                    }
                                },
                                error : function() {
                                    layer.msg("网络异常!");
                                }
                            });

                        });
                    } else if(obj.event === 'edit') {

                        showform(obj,"edit")
                    }
                });

                /*	//分页
                  laypage.render({
                    elem: '#test' //分页容器的id
                    ,count: 5 //总页数
                    ,loading: true
                ,limit: 10 //每页默认显示的数量
                ,done:function(res){
                    console.log(res)
                    userPage.data = res.data;
                }
                 });*/

                //但是，如果你的HTML是动态生成的，自动渲染就会失效
                //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
                //form.render();

                function showform(formData,event){
                    var oldData,btn,url,title;
                    if (formData){
                        oldData=formData.data
                        title ='编辑出库单';
                        url="/store/update";
                        btn=['保存', '取消'];
                    }else {
                        title ='添加出库单';
                        url="/store/reduce";
                        btn=['保存', '取消'];
                    }
                    if (event=="show"){
                        title ='出库单详情';
                        btn=[];
                    }
                    //判断是否已弹出表单
                    if(document.getElementById("formDiv")){
                        return;
                    }
                    $.get('out-form.html' , function(form) {
                        addBoxIndex = layer.open({
                            type: 1,
                            title: title,
                            content: form,
                            btn: btn,
                            shade: false,
                            offset: ['80px', '15%'],
                            area: ['800px', '400px'],
                            zIndex: 999,
                            maxmin: true,
                            yes: function(index) {
                                //触发表单的提交事件
                                $('form.layui-form').find('button[lay-filter=edit]').click();
                            },
                            full: function(elem) {
                                var win = window.top === window.self ? window : parent.window;
                                $(win).on('resize', function() {
                                    var $this = $(this);
                                    elem.width($this.width()).height($this.height()).css({
                                        top: 0,
                                        left: 0
                                    });
                                    elem.children('div.layui-layer-content').height($this.height() - 95);
                                });
                            },
                            success: function(layero, index) {
                                //弹出窗口成功后渲染表单
                                var form2 = layui.form;
                                $("select[name=saleRegion]").append(htmlStr);
                                if (formData) {
                                    $("input[name=outUnitPrice]").val(oldData.outUnitPrice);
                                    $("input[name=consignee]").val(oldData.consignee);
                                    $("input[name=address]").val(oldData.address);
                                    $("input[name=phone]").val(oldData.phone);
                                    $("input[name=saleChannel]").val(oldData.saleChannel);
                                    $("input[name=imei]").val(oldData.imei);
                                    $("textarea[name=remark]").val(oldData.remark);
                                    $("input[name=id]").val(oldData.id);
                                }

                                form2.render();

                                form2.on('submit(edit)', function(data) {
                                    $.ajax({
                                        //几个参数需要注意一下
                                        type: "POST",//方法类型
                                        async: false, // 使用同步方式
                                        data:  $.extend( {"_token":token}, data.field ),
                                        dataType: "json",//预期服务器返回的数据类型
                                        url: url ,//url
                                        success: function (result) {
                                            var data=result.data;
                                            if (result.status == 1) {
                                                layer.closeAll()
                                                table.reload('dataTable', {
                                                    where: where
                                                    ,page: {
                                                        curr: 1 //重新从第 1 页开始
                                                    }});
                                            }else{
                                                layer.msg(result.msg);
                                            }
                                        },
                                        error : function() {
                                            layer.msg("网络异常!");
                                        }
                                    });

                                    //这里可以写ajax方法提交表单
                                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                });
                            }
                        });
                    });
                }

                $('#add').on('click', function() {
                    showform("","add");

                });

                $('#layerDemo .layui-btn').on('click', function(){
                    var othis = $(this), method = othis.data('method');
                    active[method] ? active[method].call(this, othis) : '';
                });

            });
		</script>

	</body>

</html>